import React, {useState} from 'react';

import { Card, Button } from 'antd';
import ReactEcharts from 'echarts-for-react';




export default function BarCharts() {

    const [data, setData] = useState([5, 20, 36, 10, 10, 20])

    const option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: data
        }]
    };

    const update = () => setData([50, 10, 26, 20, 60, 40]);

    return (
        <Card
            title={ <Button type="primary" onClick={update}>更新</Button> }
        >
            <Card
                title="销量"
                style={{
                    maxHeight: '570px',
                    overflowY: 'scroll',
                }}
            >
                <ReactEcharts option={option} />
            </Card>
        </Card>
    )
}
